<template>
	<div class="browser-container">
		<iframe v-if="shouldLoadIframe" :src="fullAddress" ref="browserFrame" class="browser-frame"></iframe>
		<div v-if="isLoading" class="loading-indicator">加载中...</div>
		<button @click="refreshPage" class="refresh-button" :class="{ 'rotating': isRefreshing }">
			<img style="width: 30px;height: 30px;" :src="proxy.$util.urlProceIcon('shuaxin.png')">
		</button>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';

	const props = defineProps({
		address: String
	});
	const {
		proxy
	} = getCurrentInstance()
	
	const browserFrame = ref(null);
	const isLoading = ref(false);
	const shouldLoadIframe = ref(false);
	const isRefreshing = ref(false);

	const fullAddress = computed(() => {
		const address = props.address;
		if (address.startsWith('http://') || address.startsWith('https://')) {
			console.log(`使用完整地址: ${address}`);
			return address; 
		} else {
			const fullUrl = `${proxy.$BASE_URL}${address}`;
			console.log(`拼接BASE_URL: ${fullUrl}`);
			return fullUrl;
		}
	});

	const loadIframeWithDelay = () => {
		isLoading.value = true;
		setTimeout(() => {
			shouldLoadIframe.value = true;
			nextTick(() => {
				if (browserFrame.value) {
					browserFrame.value.src = fullAddress.value;
				}
			});
			// 在这里设置一个定时器来结束加载状态
			setTimeout(() => {
				isLoading.value = false;
				isRefreshing.value = false;
			}, 2000); // 假设2秒后加载完成，可以根据实际情况调整
		}, 300);
	};

	const refreshPage = () => {
		if (browserFrame.value) {
			isLoading.value = true;
			isRefreshing.value = true;
			shouldLoadIframe.value = false;
			nextTick(() => {
				loadIframeWithDelay();
			});
		}
	};

	onMounted(() => {
		console.log('当前iframe地址:', fullAddress.value);
		loadIframeWithDelay();
	});
</script>

<style scoped>
	.browser-container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.browser-frame {
		width: 100%;
		height: 100%;
		border: none;
	}

	.refresh-button {
		position: absolute;
		bottom: 20px;
		right: 20px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		transition: transform 0.3s ease;
	}

	.refresh-button.rotating {
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.loading-indicator {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
	}

	.error-message {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(255, 0, 0, 0.7);
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
	}
</style>